@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

@use "_mixins" as *;

/*-------------------------------------------------------------------------.
|                     __        ___  _____ ___                             |
|                     \ \      / / \|_   _/ _ \                            |
|                      \ \ /\ / / _ \ | || | | |                           |
|                       \ V  V / ___ \| || |_| |                           |
|                        \_/\_/_/   \_\_| \___/                            |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles used in WATO.                                                     |
'-------------------------------------------------------------------------*/

.wato {
  color: $font-color;
}

.wato table.data {
  th.header_state {
    color: $font-color-dimmed !important; // prevents state colors in table headers
  }

  td.buttons {
    &,
    a,
    img {
      white-space: nowrap;
    }
  }
  a.disabled {
    pointer-events: none;
    opacity: $inactive-opacity;
  }
}

.wato td.right {
  text-align: right;
}

/* WATO configuration forms */
.wato form.new_rule {
  margin: 10px 0;
}

.wato div.connection_status {
  display: inline-block;
}

.wato table.auditlog {
  td.nobreak {
    white-space: nowrap;
  }

  td.fill {
    width: 100%;
  }

  img {
    float: none;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0 5px 0 0;
    border-style: none;
  }
}

.wato div.inherited {
  color: $font-color-dimmed;

  a {
    color: $font-color-dimmed;
  }

  b {
    font-weight: $font-weight-default;
    color: $font-color;
  }
}

.wato td.inherited {
  color: $font-color-dimmed;
}

/* host validation error */
table.validationerror {
  width: 100%;

  td.img {
    width: 68px;
  }

  img.icon {
    width: 48px;
    height: 48px;
    margin-top: 10px;
    margin-right: 15px;
    margin-left: 5px;
  }
}

/* bulk actions in host table */
.wato table.data tr.data {
  td.bulksearch,
  td.bulkactions {
    padding-top: 25px;
  }

  &:not(:last-child) td.bulksearch,
  &:not(:last-child) td.bulkactions {
    padding: 10px;
  }
}

.wato td.bulkactions {
  text-align: right;

  &.service_discovery {
    text-align: left;
  }

  select {
    width: auto;
  }
}

div#service_container {
  table.data {
    tr.data > td {
      padding: 3px 7px;

      &.state {
        height: 100%;
        padding: 0 1px;
      }

      &.service {
        min-width: 340px;
        overflow-wrap: break-word;
      }

      &.labelstate {
        width: 130px;
        max-width: 130px;
        min-width: 130px;
        overflow-wrap: break-word;
      }

      &.expanding {
        width: 100%;
        min-width: 500px;
      }

      &.plugins {
        min-width: 200px;

        p {
          margin-top: 5px;
          margin-bottom: 5px;
        }
      }

      a {
        line-height: 20px;
      }
    }
  }

  h3 {
    img {
      position: relative;
    }
  }
}

@mixin message-container-mixin {
  display: grid;
  position: relative;
  margin-bottom: $spacing;
  padding: 12px 16px;
  background-color: $headline-color;

  div.state_bar {
    position: absolute;
    width: 25px;
    height: 100%;

    span {
      display: flex;
      height: 100%;
      border-radius: $border-radius-left;
      justify-content: center;
      align-items: center;

      img {
        width: 14px;
      }
    }
  }

  div.message_container > h2 {
    margin: 0 25px 0px;
  }
}

div.warning_container {
  margin: $spacing;
  display: inline-flex;
  border-radius: $theme-border-radius $spacing $spacing $theme-border-radius;
  align-items: center;
  background: $color-state-1-background;
  width: calc(100% - 2 * $spacing);
  div.content {
    margin: 0;
    background-color: $headline-color;
    border-radius: 0 $theme-border-radius $theme-border-radius 0;

    .heading {
      margin-top: 0;
      margin-bottom: 4px;
    }

    div.button-container {
      padding-top: 8px;

      a {
        padding: 8px 18px;
        line-height: 30px;
        color: $font-color-black;
        background: $color-state-1-background;
        border-radius: $theme-border-radius;
        text-decoration: none;
      }
    }
  }
  &::before {
    display: inline-block;
    padding: 5px;
    content: url("images/icon_problem.svg");
  }
}

div#notification_analysis_container {
  @include message-container-mixin;
  margin-top: $spacing;
  div.message_container {
    margin: 5px 25px 0px;
    h2 {
      margin: 0;
    }
  }
}

div#datasources_container {
  @include message-container-mixin;

  div.message_container {
    &:first-child h2 {
      margin: 0;
    }

    table {
      margin: 5px 25px 0px;

      td {
        padding-right: 5px;
        padding-bottom: 2px;

        b {
          margin: 0;
        }
      }
    }
  }
}

div#activation_state_message_container {
  @include message-container-mixin;

  div.message_container div {
    margin: 5px 25px;

    span {
      display: block;
      margin-bottom: $spacing;

      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}

div#fixall_container {
  background-color: $headline-color;
  border-radius: 2px;
  overflow: hidden;

  img {
    margin-left: $spacing;
  }

  ul {
    display: inline-block;
    list-style: none;
    margin: 15px 0 15px 0;
    padding-left: $spacing;
  }

  li {
    display: inline-block;
    padding: 0 $spacing;
    border-right: 1px solid $font-color;
  }

  li:last-child {
    border-right: none;
  }

  a {
    text-decoration: none;

    &:hover {
      opacity: 0.5;
    }
  }

  span {
    padding: 2px;
  }

  span.changed {
    color: $font-color-green;
    font-weight: $font-weight-bold;
  }
}

table.data tr.data > td.bulkactions {
  background: transparent;
  border: none;
}

a.service_button.disabled,
span > img.service_button.disabled {
  &:not(.tooltip) {
    pointer-events: none;
  }

  cursor: default;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
}

.wato table.data tr.data td.bulksearch {
  padding-right: 0;
  white-space: nowrap;

  div.togglebutton.checkbox {
    margin-left: 0;
  }
}

table.data tr.data > td.bulksearch {
  background: transparent;
  border: none;

  div.togglebutton.checkbox {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 7px;
    margin-right: 8px;
  }
}

.wato td.bulksearch {
  input[type="text"] {
    width: 150px;
    margin-right: 5px;
  }

  .togglebutton {
    margin-bottom: 0;
  }

  input.text,
  select.text,
  textarea.text,
  .text#mk_side_search_field {
    width: auto;
  }
}

table.data tr.data > td.bulksearch div.togglebutton.checkbox a,
table.data tr.data > td.bulksearch div.togglebutton.checkbox body.main .popup_menu span,
body.main .popup_menu table.data tr.data > td.bulksearch div.togglebutton.checkbox span {
  height: 24px;
  padding: 1.5px;
  box-sizing: border-box;
}

.wato div.floatfolder {
  position: relative;
  left: -14px;
  float: left;
  width: 180px;
  height: 140px;
  background-image: url("images/folder_closed.png");
  background-position: top left;
  background-repeat: no-repeat;

  .autherr {
    position: absolute;
    top: 28px;
    right: 19px;
    z-index: 500;
  }

  div.infos img {
    position: relative;
    top: -1px;
    width: 14px;
    height: 14px;
  }

  .edit {
    position: absolute;
    top: 20px;
    right: 47px;
  }

  div.popup_trigger {
    position: absolute;
    top: 20px;
    right: 25px;
  }

  .delete {
    position: absolute;
    top: 20px;
    right: 3px;
  }

  .infos {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    overflow: hidden;

    .infos_content {
      right: 0;
      left: 0;
      overflow: hidden;
      color: $font-color-white;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &.open {
    background-image: url("images/folder_open.png");

    .infos {
      height: 50px;

      .infos_content {
        position: absolute;
        bottom: 0;
      }
    }
  }

  .title {
    position: absolute;
    line-height: 17px; // prevents text from cut of on top
    right: 20px;
    bottom: -4px;
    left: 20px;
    padding: 0;
    overflow: hidden;
    color: $font-color-white;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    -o-text-overflow: ellipsis;

    a {
      position: relative;
      top: -2px;
      text-decoration: none;
    }
  }

  &:hover {
    cursor: pointer;

    a {
      text-decoration: underline;
    }
  }

  &.newfolder {
    font-size: 80px;
    line-height: 145px;
    color: $font-color-light-grey;
    text-align: center;
    opacity: 0.4;
  }
}

.wato div.floatfolder div.title a,
.wato div.floatfolder div.title body.main .popup_menu span,
body.main .popup_menu .wato div.floatfolder div.title span,
.wato div.floatfolder.locked div.title {
  font-weight: $font-weight-default;
  color: $font-color;
}

.wato img.authicon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  vertical-align: middle;
}

.wato div.popup_menu {
  min-width: 137px;

  select {
    height: auto;
  }
}

.wato div.hoverarea {
  position: relative;
  top: 4px;
  left: 10px;
  z-index: 100;
  width: 154px;
  height: 40px;
}

.wato div.folder_foot {
  margin-bottom: 10px;
  clear: left;
}

/* Controls for the audit log paged mechanism */
.wato div.paged_controls {
  position: relative;
  top: 3px;
  float: right;
}

.wato img.trans {
  width: 20px;
  height: 13px;
}

.wato td.value img {
  width: 20px;
  height: 20px;
}

.wato ul.conditions {
  padding: 0;
  list-style-type: square;

  li {
    padding: 0;
    margin: 0;

    &.no_conditions {
      color: $font-color-dimmed;
    }
  }

  tags {
    display: inline-block;
    padding: 0 2px;

    &.tagify.display[readonly] tag {
      padding: 0;
      margin-right: 0;

      div {
        margin: 0;
      }
    }
  }

  i.andornot_operator,
  div.label_group {
    display: inline-block;
    padding: 0 2px;
  }
}

.wato h1.edit_configuration_bundle_header {
  padding-top: $spacing;
}

.wato form.rule_editor {
  table.locked tbody {
    pointer-events: none;
    td.content {
      opacity: 0.5;
    }
  }
  table.hosttags td.title {
    min-width: 200px;
  }

  td.tag_sel {
    display: table-cell;
    vertical-align: middle;

    > div {
      white-space: nowrap;
    }
  }
}

.wato table.itemlist td {
  padding: 0;
  margin: 0;
}

span.tagify__tag-text {
  white-space: pre;
}

.tagify__dropdown__item {
  color: $font-color;
}

.tagify__dropdown__item--active {
  color: $font-color-green;
}

.wato table.data.ruleset {
  td.rulebuttons a.disabled img {
    opacity: 0.5;
  }

  td.condition,
  td.value,
  td.description,
  td.source {
    min-width: 20%;
  }

  tr.disabled td {
    * {
      color: $font-color-dimmed;
    }

    .tagify__tag-text {
      color: inherit;
    }

    tag > div {
      opacity: 0.5;
    }
  }
}

.wato table.data td.buttons a.disabled img {
  opacity: 0.5;
}

table.data.oddeven > tbody > .matches_search > td {
  background-color: $matches-search-bg-color;

  &.buttons {
    border-radius: 0;
  }
}

/* Special styling for Timeperiods editor */
.wato table.timeperiod td.name {
  width: 195px;
}

form#form_timeperiod td.vlof_content {
  background-image: none;

  input.text:first-child {
    width: 189px;
    margin-right: 4px;
  }
}

/* Value editor */
.wato pre.ve_textarea {
  margin: 0;
}

/* main menu */
form.search,
div.filter_buttons {
  display: inline-block;
  padding-top: 10px;
  margin-bottom: 10px;
  clear: both;
}

.wato form.search {
  color: $font-color;
}

.wato div.mainmenu {
  a,
  body.main .popup_menu span,
  body.main .popup_menu & span {
    display: block;
    width: 330px;
    height: 70px;
    margin: 0 8px 8px 0;
    background: $bg-color-secondary;
    border: 1px solid $color-table-border;
    border-radius: $theme-border-radius;
    box-shadow: none;

    &:hover {
      background: $input-button-hover-bg-color;
    }
  }

  a {
    position: relative;
    float: left;
    width: 317px;
    padding: $spacing 0 0;
    border: $wato-a-border;

    &.large {
      height: 110px;
    }
  }

  div {
    text-decoration: none;

    &.title {
      position: absolute;
      top: 14px;
      left: 72px;
      padding: 0;
      font-weight: $font-weight-bold;
    }

    &.subtitle {
      position: absolute;
      top: 20px;
      left: 72px;
      width: 234px;
      padding: 16px 0 0;
      overflow: hidden;
      font-size: $font-size-small;
      font-weight: $font-weight-default;
      line-height: 1.5;
      letter-spacing: $letter-spacing-table;
      color: $font-color-dimmed;
      text-rendering: optimizeLegibility;
    }
  }

  img {
    position: absolute;
    top: 22px;
    left: 16px;
    width: 36px;
    height: 36px;
  }
}

/* page "Rulesets" */
.wato .rulesets {
  table.nform > tbody > tr > td.container {
    height: auto;
  }

  div.ruleset {
    float: left;
    margin-right: 10px;
    margin-left: 10px;

    div {
      height: 16px;

      &.text {
        float: left;
        width: 276px;
        padding-right: 3px;
        overflow: hidden;
      }
    }

    a {
      color: $font-color;
      text-decoration: none;
      white-space: nowrap;

      &:hover {
        text-decoration: underline;
      }
    }

    div.rulecount {
      float: left;
      width: 16px;
      text-align: right;
    }
  }
}

.wato a.config-bundle-link {
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: inline-block;
    background-image: url("images/icon_manual_active.svg");
    background-repeat: no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 2px;
  }
}

.wato div.no-config-bundles {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  font-size: $font-size-large;
  text-align: center;

  img {
    width: 140px;
    height: 140px;
    margin-bottom: 32px;
  }

  p {
    max-width: 280px;
    line-height: 1.5;
  }

  a {
    text-decoration: none;
    font-weight: $font-weight-bold;
    color: $font-color-light-bg;
    background-color: $success-dimmed;
    border: 1px solid $default-button-border-color;
    border-radius: $theme-border-radius;
    padding: 12px 16px;
  }
}

/* page "global settings*/
.wato div.globalvars {
  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  td.simple a.modified,
  td.simple div.toggle_switch_container.modified,
  td.content a.modified > table {
    padding: 2px;
    margin-left: -2px;
    border: 1px solid $font-color-dimmed;
    border-radius: $spacing;

    &.on {
      border: 1px solid $success;
    }
  }

  td.simple div.toggle_switch_container {
    width: $toggle-switch-width-large;
    height: $toggle-switch-height;

    img.iconbutton {
      height: $toggle-switch-height;
    }

    &.modified {
      padding: 1px 2px;
    }

    a.modified {
      border: none;
      padding: 0;
    }
  }

  div.title a.modified {
    border: none;
    box-shadow: none;
  }

  td.legend {
    width: 400px;
    padding-top: 0;

    div.title {
      max-width: 390px;
    }
  }
}

/* activation */
.wato table.data.activation a.disabled {
  pointer-events: none;
}

.wato table.changes {
  width: 100%;

  td.affected_sites {
    max-width: 400px;
  }

  tr.foreign.not_permitted td {
    color: $font-color-red;
  }
}

.wato table.activation {
  td.details {
    div.warning {
      background: $color-state-1-background;
    }

    div.warning,
    div.error {
      margin: 2px 0;
    }

    pre {
      white-space: pre-wrap;
    }
  }

  td.repprogress {
    position: relative;
    width: 140px;
    min-width: 140px;
    padding: 0;
    margin: 0;

    div.msg {
      position: absolute;
      top: 10px;
      left: 0;
      z-index: 20;
      width: 160px;
      height: 16px;
      text-align: center;

      &.state_success,
      &.state_warning {
        color: $font-color-light-bg;
      }
    }

    div.progress {
      position: absolute;
      top: 4px;
      left: 0;
      z-index: 0;
      width: 0;
      height: 24px;
      padding-top: 10px;
      color: $font-color-black;
      border-radius: $theme-border-radius;
      box-shadow: none;
      box-sizing: border-box;

      &.in_progress {
        background: $repprogress-progress-bg-color;
        transition: width 1s;
      }

      &.state_success {
        background: $color-state-success-background;
      }

      &.state_error {
        background: $color-state-2-background;
      }

      &.state_warning {
        background: $color-state-1-background;
      }
    }
  }
}

.wato td.tag-ellipsis {
  max-width: 300px;
}

table.data tr.data.dcd_log_entries {
  > td {
    font-family: $font-family-monospace;
    color: $font-color-white;
    background-color: $black;
  }

  pre {
    max-height: 300px;
    overflow-y: scroll;
    text-overflow: ellipsis;
    resize: both;
  }
}

.wato form.rule_representation {
  div.success.hidden {
    display: none;
  }

  textarea#rule_representation {
    min-width: 400px;
    min-height: 200px;
    padding: $spacing;
    margin-right: $spacing;
    overflow: auto;
    font-family: $font-family-monospace;
    border: 1px solid $color-table-border;
  }
}

.wato div.error pre {
  white-space: pre-wrap;
}

/* Logwatch pattern editor */
table.logwatch span.match {
  padding: 0 2px 2px;
  color: $font-color-light-bg;
  background-color: $color-state-6-background;
  border-radius: $theme-border-radius;
}

/* BI Editor */
table.data td.bi_rule_tree {
  b.treeangle {
    font-weight: $font-weight-default;
    color: $font-color-black;
  }

  ul.treeangle {
    margin: 1px 6px;

    li {
      display: list-item;
      padding-left: 5px;
      margin: 0 0 0 1px;
      list-style: inside disc;
    }
  }

  > li {
    display: list-item;
    padding-left: 5px;
    margin: 0 0 0 1px;
    list-style: inside none;
  }
}

.user_security_form_container {
  margin: $spacing-half 0 $spacing 18px;
}

/*-Host Diag-----------------------------------------------------------.
|              _   _           _     ____  _                           |
|             | | | | ___  ___| |_  |  _ \(_) __ _  __ _               |
|             | |_| |/ _ \/ __| __| | | | | |/ _` |/ _` |              |
|             |  _  | (_) \__ \ |_  | |_| | | (_| | (_| |              |
|             |_| |_|\___/|___/\__| |____/|_|\__,_|\__, |              |
|                                                  |___/               |
+---------------------------------------------------------------------*/

.wato .diag_host .log,
.backup_job .log {
  width: 700px;
  height: 113px;
  padding: 5px;
  overflow-y: scroll;
  font-family: $font-family-monospace;
  vertical-align: top;
  background-color: $bg-color;
  resize: both;
}

.backup_job {
  .log pre {
    margin: 2px;
  }

  td.left {
    width: 12%;
    min-width: 200px;
  }
}

.wato .diag_host {
  div.success {
    margin-top: 0;
  }

  td > h3 {
    margin-top: 0;
  }

  table.nform {
    width: 212px;
  }

  .test {
    margin-bottom: 15px;
  }

  .log {
    padding: 8px;
    margin: 8px;
    border: 1px solid $color-table-border;
    border-radius: $theme-border-radius;
    box-shadow: none;

    &.diag_success {
      background-color: $host-diag-success-bg-color;
    }

    &.diag_failed {
      background-color: $input-error-bg-color;
    }
  }

  table.test td {
    padding: 0;

    &.icons {
      padding: 2px;
    }
  }

  td.icons {
    div {
      position: relative;
      width: 22px;
      height: 120px;

      img {
        margin-left: 2px;
      }
    }

    img.retry {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}

div.diag_host > table > tbody > tr > td {
  vertical-align: unset;
}

/*--Settings---------------------------------------------------------------.
|                ____       _   _   _                                      |
|               / ___|  ___| |_| |_(_)_ __   __ _ ___                      |
|               \___ \ / _ \ __| __| | '_ \ / _` / __|                     |
|                ___) |  __/ |_| |_| | | | | (_| \__ \                     |
|               |____/ \___|\__|\__|_|_| |_|\__, |___/                     |
|                                           |___/                          |
+--------------------------------------------------------------------------+
| Settings for hosts and services (rule analysis)                          |
'-------------------------------------------------------------------------*/

table.setting td.reason {
  display: inline-block;
  float: none;
  width: 180px;
  color: $font-color;

  span {
    color: $font-color-dimmed; /* default value */
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

td.settingvalue.unused,
td.settingvalue.unused td {
  color: $font-color-dimmed;
}

.wato table.nform div.title a {
  color: $font-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

table.nform.rulesettings td.legend {
  width: 300px;

  div.title {
    max-width: 300px;
  }
}

/*--Profile Repl-----------------------------------------------------------.
|          ____             __ _ _        ____            _                |
|         |  _ \ _ __ ___  / _(_) | ___  |  _ \ ___ _ __ | |               |
|         | |_) | '__/ _ \| |_| | |/ _ \ | |_) / _ \ '_ \| |               |
|         |  __/| | | (_) |  _| | |  __/ |  _ <  __/ |_) | |               |
|         |_|   |_|  \___/|_| |_|_|\___| |_| \_\___| .__/|_|               |
|                                                  |_|                     |
'-------------------------------------------------------------------------*/

#profile_repl {
  .site {
    width: 158px;
    padding: 2px;
    margin: 0 5px 5px 0;
    text-overflow: ellipsis;
    background: $bg-color-secondary;
    border: 1px solid $color-table-border;
    border-radius: 6px;
    box-shadow: none;

    div,
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }

  div {
    &.repl_status {
      background-size: contain;
    }

    &.repl_locked {
      background-image: url("images/icon_repl_locked.png");
    }

    &.repl_pending {
      background-image: url("images/icon_repl_pending.png");
    }

    &.repl_failed {
      background-image: url("images/icon_repl_failed.png");
    }

    &.repl_25 {
      background-image: url("images/icon_repl_25.png");
    }

    &.repl_50 {
      background-image: url("images/icon_repl_50.png");
    }

    &.repl_75 {
      background-image: url("images/icon_repl_75.png");
    }

    &.repl_success {
      background-image: url("images/icon_success.png");
    }
  }
}

.wato table.data.check_catalog td {
  &.title {
    display: table-cell;
    width: 500px;
  }

  &.name {
    width: 200px;
  }

  &.agents {
    width: 200px;
  }
}

/*--Best practices---------------------------------------------------------.
 |   ____            _                          _   _                       |
 |  | __ )  ___  ___| |_   _ __  _ __ __ _  ___| |_(_) ___ ___  ___         |
 |  |  _ \ / _ \/ __| __| | '_ \| '__/ _` |/ __| __| |/ __/ _ \/ __|        |
 |  | |_) |  __/\__ \ |_  | |_) | | | (_| | (__| |_| | (_|  __/\__ \        |
 |  |____/ \___||___/\__| | .__/|_|  \__,_|\___|\__|_|\___\___||___/        |
 |                        |_|                                               |
 '-------------------------------------------------------------------------*/

.wato table.data.analyze_config {
  width: 100%;

  td.state div {
    position: relative;
    line-height: 20px;
  }

  th.header_state {
    width: 100px;
  }

  td.state a {
    position: absolute;
    right: 0;
    background: transparent;
  }

  tr.ac_test_details td a {
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

table.data.analyze_config td.buttons {
  min-width: 25px;
}

/* Left over wato styles from former _main.scss */
.wato .search {
  display: block;
}

.wato h3 {
  @include table-header-mixin;
}

div.wato div.matching_message,
div.wato div.info {
  padding-left: $spacing;
}

a.create_rule {
  @include button-mixin;
  display: inline-flex;
  align-items: center;
  padding: 0.5 * $spacing $spacing;
  cursor: pointer;
  border-radius: $theme-border-radius;

  img.icon {
    margin-right: 0.5 * $spacing;
  }
}

tr.condition div.label_groups,
form.biaggr div.label_groups,
form.birule div.label_groups {
  @include label-groups-mixin; // from _main.scss

  tr[id*="label_groups_entry"] > td.vlof_buttons a.delete_button img {
    width: 12px;
    height: 12px;
    opacity: 1;
    margin-right: $spacing;
  }

  div.label_group {
    flex-grow: unset;
  }
}

div.dcd_host_manager_state,
div.dcd_hosts_about_cycle {
  background-color: $bg-color !important;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0 !important;
  padding-left: 5px !important;

  div.section {
    height: 25px;
    display: flex;

    .title {
      font-weight: 600;
    }
  }
}

h3.table.dcd_about_cycle {
  margin-top: 20px;
}

table.dcd_host_processing {
  margin-bottom: 20px;
}

div.user_messages {
  div.container {
    div.text {
      margin: 0 10px 10px 10px;
    }

    div.footer {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;

      div.details {
        display: flex;
        align-items: center;
      }
    }
  }
}

#form_edit_host table#monitoring_agents {
  div#attr_default_tag_agent,
  div#attr_entry_tag_agent {
    div.cmk-vue-app {
      display: contents;
    }
  }
}
